<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>预算安排</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/jquery-1.11.3.js"></script>
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/default/easyui.css" />
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/icon.css" />
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.patch.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/util/easyui-util.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/system/system-util.js"></script>
	<!-- 引入 ECharts 文件 -->
	<script src="<%=path %>/resources/script/echarts/echarts.js"></script>

  </head>
  <style>
ul{
list-style:none;
}
.test_ul li{
float:left;
} 
</style>
  <body class="easyui-layout">
  <div data-options="region:'center'" style="width:35%;" >
  	<div>
  		<input type="hidden" id="fpid" />
  		<input type="hidden" id="tpid" />
  		<input type="hidden" id="epid" />
    	<table>
   			<tr>
   				<td><input id="projects" name="projects" class="easyui-validatebox" style="width: 150px;" /></td>
   				<td><a id="btn_return" href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search">返回上一页</a></td>
   			</tr>
   		</table>
    </div>
  	<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="task_count" style="width: 480px;height:480px; margin: 0 auto;"></div>
  </div>
  <div data-options="region:'east',split:true,hideCollapsedContent:false" style="width:65%;">
  	<table id="dg"></table>
  	<!-- toolbar -->
    <div id="tb" style="padding: 5px; height: auto;">
    	<!-- opreate -->
    	<div align="center" style="width:100%;margin: 10px">
    	     <font  style="font-weight:bold;" size="5"><label id="title"></label></font>
    	     <div align="center" style="width: 100%"> 
	    	     <ul class="test_ul">
		    	     <li style="width: 20%">总预算：<label id="zys"></label></li>
		    	     <li style="width: 20%">已安排预算：<label id="yapys"></label></li>
		    	     <li style="width: 20%">调整预算：<label id="tzhys"></label></li>
		    	     <li style="width: 20%">预算差额：<font color="red"><label id="ysce"></label></font></li>
		    	     <li style="width: 20%"><a href="javascript:void(0);" id="modifySave" class="easyui-linkbutton" title="保存" iconCls="icon-save" plain="true">保存调调整后的预算</a></li>
	    	     </ul>
    	     </div>
    	     <div><br><hr style="height:1px;border:none;border-top:2px solid #555555;margin-right: 10px" /></div>
    	</div>
    </div>
  </div>
  <div id="win" class="easyui-window"
   	 data-options="modal:true,
    	 				closed:true,
    	 				maximizable:true,
    	 				minimizable:false,
    	 				collapsible:false,
    	 				iconCls:'icon-save',
    	 				draggable:true">
   	 <iframe id="contentFrame" src="" width=100% height=99% marginwidth=0 framespacing=0 marginheight=0 frameborder=no scrolling=no></iframe>
  </div>
<script type="text/javascript">
	var contextPath = "<%=path%>";
	var task_count_myChart;
	var parent_index = {};
	var allData = {};
	$(function(){
		$('#btn_return').hide();
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('task_count'));
		task_count_myChart = myChart;
		var _click_piId;
		/*** 初始化项目库 */
		$('#projects').combobox({
	        url:'projectIndex/projectIndexs.shtml',
	        method:'get',
	        valueField:'id',
	        textField:'name',
	        editable : false,
	        panelHeight:'auto',
	        onSelect : function (record) {
	        	/*** 初始化报表 */
	        	parent_index = record;
	        	myChart.showLoading();
	        	$.post('projectIndex/projectIndexs.shtml', {id : parent_index.id}, function(data){
	        		myChart.hideLoading();
	        		initData();
	        		initCharts(myChart, data);
	        	});
	        },
	        onLoadSuccess : function () {
	        	var data = $('#projects').combobox('getData');
	        	if (data.length > 0) {
					$('#projects').combobox('select', data[0].id);
				}
	        	for(var i=0;i<data.length;i++){
	        		allData[data[i].id]= data[i];
	        	}
	        }
        });
        
        $('#btn_return').click(function(){
      		$.post('projectIndex/projectIndexs.shtml', {id :parent_index.parentId}, function(data){
	        		parent_index = allData[parent_index.parentId];
	        		if (parent_index == null || null == parent_index.parentId || '' == parent_index.parentId) {
	        			$('#btn_return').hide();
	        		}
	        		myChart.hideLoading();
	        		initCharts(myChart, data);
	        		$('#btn_return').show();
	        	});
        });
        
        $('#modifySave').click(function(){
        	if(parseInt($("#ysce").html())!=0){
        		 $.messager.confirm("操作提示", "分项预算总金额与父指标预算不一致，是否继续保存？", function (data) {  
                     if (data) {  
                    	 saveModify();
                     }  
                     else {  
                        return;
                     }  
            	 })
        	}else{
        		saveModify();
        	}
        	
        });
        
	});
	function saveModify(){
		var modify="";
		$("input[name='newAmount']").each(function(){
			modify+=$(this).attr("id")+","+parseInt($(this).val())+";"
		});
		var newPi = {};
		newPi.remark = modify;
		$.post('projectIndex/budgetModifySave.shtml', newPi, function(data){
			if(data.success == true){
				$.messager.alert('提醒', "预算调整成功！", 'info');
				$.post('projectIndex/projectIndexs.shtml', {id : parent.id}, function(data){
					task_count_myChart.hideLoading();
	        		initCharts(task_count_myChart, data);
	        		$('#btn_return').show();
	        	});
			}
	    });
	}
	
	function initCharts(myChart, data){
		var _title = parent_index.name + '指标预算分布图';

		var _projectIndexs = new Array();
		
		initDataList(data);
		if (null == parent_index.parentId || '' == parent_index.parentId) {
			$('#btn_return').hide();
		}
		var sum=0;
		for (var i=0; i<data.length; i++) {
			if(data[i].planAmount==null||data[i].planAmount=='') data[i].planAmount=0;
			data[i].value=data[i].planAmount;
			sum+=parseInt(data[i].planAmount);
			allData[data[i].id]= data[i];
		}
		$("#tzhys").html(sum);
		$("#yapys").html(sum);
		$("#ysce").html(parseInt($("#zys").html()) -parseInt($("#tzhys").html()));
	    // 指定图表的配置项和数据
	    var option = {
		    title : {
		        text: _title,//'项目建设任务分布图',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        //formatter: "{a} <br/>{b} : {c} ({d}%)"
		        formatter: function(params) {  
		        	var html = params.data.name+"</br>预算资金："+params.data.planAmount +" &nbsp;元";
		              return html;  
		        }  
		    },
		    legend: {
		        orient: 'horizontal',
		        top : 30,
		        left: 'center',
		        data: data
		    },
		    series : [
		        {
		            name: '项目建设任务',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:data,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	    
	    // 点击事件
	    myChart.on('click', function (params) {
	    	var _leaf = params.data.leaf;
	    	if (!_leaf) {
	    		//var _myChart = echarts.init(document.getElementById('task_count'));
		        /*** 初始化报表 */
	        	//_myChart.showLoading();
	        	myChart.clear();
	        	myChart.showLoading();
	        	$.post('projectIndex/projectIndexs.shtml', {id : params.data.id}, function(data){
	        		parent_index =params.data;
	        		myChart.hideLoading();
	        		initCharts(myChart, data);
	        		$('#btn_return').show();
	        	});
	    	} else {
	    		//$.messager.alert('warning', '不可以！', 'warning');
	    	}
	    });
	}
	
	function initDataList(data) {
		$('#title').html(parent_index.name+"预算安排情况");
		var m = parent_index.planAmount==null || parent_index.planAmount==''?0:parent_index.planAmount;
		$('#zys').html(m+" 元");
		$('#dg').datagrid('reload', {
    		parentId : parent_index.id
    	});
		
	}
	function initData(){
		$('#dg').datagrid({    
		    title: "任务列表",
			border:0,
			nowrap:true,
			striped:true,
			fit: true,//自动大小
			url:'projectIndex/projectIndexs',
			queryParams : {projectIndexId : parent_index.id},
			frozenColumns : [[
				{field : 'id', title : 'id', hidden:true},    
		        {field : 'name', title : '任务名称', width:320}
			]],
		    columns:[[    
		        {field : 'planAmount', title : '预算资金（元）', width:110, align : 'center'},
		        {field : '_planAmount', title : '预算调整（元）', width:150, align : 'center',
		        	formatter : function (value, row, index) {
		        		var m = row.planAmount==null || row.planAmount==''?0:row.planAmount;
		        		var html="<input id='"+row.id+"' value="+m+" name='newAmount' style='width:80px' onblur=countNew()>"
		        		return html;
		        	}
		        }
		    ]],
			singleSelect:true,
			rownumbers:true,
			toolbar:'#tb',
			pagination:true,
			pageSize:50,
		}).datagrid('getPager').pagination({  
	        pageSize: 50,//每页显示的记录条数，默认为10  
	        pageList: [50, 100, 200, 500],//可以设置每页记录条数的列表  
	        beforePageText: '第',//页数文本框前显示的汉字  
	        afterPageText: '页    共 {pages} 页',  
	        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
	    });
	}
	
	function countNew(){
		var count =0;
		$("input[name='newAmount']").each(function(){
			count = count+ parseInt($(this).val());
		})
		$("#tzhys").html(count);
		$("#ysce").html(parseInt($("#zys").html()) - count);
	}
</script>
  </body>
</html>
